{% macro button(text, color='red', width='100px', height='30px', url='', id='btn') -%}
<a href="{{url}}" id="{{id}}">
	<div class="button button_{{color}}" style="height: {{height}}; width: {{width}};">
		<div style="display: inline-block; vertical-align: middle;">
			{{text}}
		</div>
	</div>
</a>
{%- endmacro %}

{% macro prefix_search_form(search_opt_parent='all', search_opt_child='none', id_suffix='') %}
<!--
An overlay div placed between page content and
prefix menu to capture clicks outside the menu.
-->
<form name="prefix_search{{ id_suffix }}" method="post">
	<center>
		<div style="padding-bottom: 2px; padding-top: 1px; position: relative;">
			<div style="width: 50%; max-width: 700px; min-width: 500px; padding-left: 87px;">
				<table cellpadding="0" cellspacing="0" style="width: 100%;">
					<tr>
						<td style="padding-right: 20px; width: 100%;">
							<input id="query_string{{ id_suffix }}" type="text" style="width: 100%;" autocomplete="off" autofocus>
							<div style="font-size: 10px; margin: 0px; padding: 1px 1px 1px 10px; width: 100%; position: relative;">
								<div id="search_stats">&nbsp;</div>
								<div style="padding: 1px 1px 1px 10px; position: absolute; top: 0; right: 0;"><a href="javascript:void(0);" onclick="displaySearchHelp();">search help?</a></div>
							</div>
						</td>
						<td style="vertical-align: top; width: 87px; !important">
							<button class="btn btn-primary" style="width: 70px">
								<span class="glyphicon glyphicon-search"></span>
							</button>
						</td>
					</tr>
				</table>
			</div>

			<div id="search_interpretation">
			</div>
		</div>
	</center>
</form>

{% endmacro %}

{% macro prefix_search_result(id_suffix='') %}
<div id="fixed_prefix_header" class="prefix_list_header" style="visibility: hidden;">
	<div class="prefix_column" style="width: 156px;">VRF</div>
	<div class="prefix_column" style="width: 300px; padding-left: 20px;">Prefix</div>
	<div class="prefix_column" style="width: 25px;"></div>
	<div class="prefix_column" style="width: 26px;"></div>
	<div class="prefix_column" style="width: 26px;"></div>
	<div class="prefix_column" style="width: 150px;">Node</div>
	<div class="prefix_column" style="width: 80px;">Order</div>
	<div class="prefix_column" style="width: 80px;">Customer</div>
	<div class="prefix_column" style="width: 26px;"></div>
	<div class="prefix_column" style="">Description</div>
</div>
<div id="floating_prefix_header" style="background-color: #FFFFFF; visibility: hidden; position: fixed; width: 100%; border-bottom: 1px solid #DDDDDD; top: 0px; z-index: 1;">
	<div class="prefix_list_header">
		<div class="prefix_column" style="width: 156px;">VRF</div>
		<div class="prefix_column" style="width: 300px; padding-left: 20px;">Prefix</div>
		<div class="prefix_column" style="width: 25px;"></div>
		<div class="prefix_column" style="width: 26px;"></div>
		<div class="prefix_column" style="width: 26px;"></div>
		<div class="prefix_column" style="width: 150px;">Node</div>
		<div class="prefix_column" style="width: 80px;">Order</div>
		<div class="prefix_column" style="width: 80px;">Customer</div>
		<div class="prefix_column" style="width: 26px"></div>
		<div class="prefix_column" style="">Description</div>
	</div>
</div>
<div class="prefix_list" id="prefix_list{{ id_suffix }}">
</div>
<div id='nextpage' style="display: none; text-align: center; padding: 20px;"><a href="javascript:void(0);" onclick="performPrefixNextPage();">Display more...</a></div>
{% endmacro %}
